<template>
  <div class="my-message">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
      <div class="relative">
        <div class="z-999 flex items-center justify-between px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <span class="text-center text-36rpx font-600">消息</span>
          <div class="text-hex-fff">111</div>
        </div>
      </div>
    </div>
    <div class="message-top mt-48rpx bg-hex-fff p-24rpx">
      <div class="item mt-32rpx h-96rpx flex items-center">
        <div class="h-76rpx w-76rpx flex items-center">
          <image class="h-40rpx w-40rpx flex-1"
                 :src="`${cdnUrl}/imgs/mine/my_slices/like.png${imgVersion}`" mode="widthFix" />
        </div>
        <div class="describe ml-24rpx flex flex-1 justify-between">
          <div class="title text-28rpx font-600 leading-33rpx text-hex-333">点赞</div>
          <span class="h-36rpx rounded-36rpx bg-hex-F17171 px-16rpx leading-36rpx text-current text-hex-fff">+1</span>
        </div>
      </div>
      <div class="item mt-32rpx h-96rpx flex items-center">
        <div class="h-76rpx w-76rpx flex items-center">
          <image class="h-40rpx w-40rpx flex-1"
                 :src="`${cdnUrl}/imgs/mine/my_slices/attentions.png${imgVersion}`" mode="widthFix" />
        </div>
        <div class="describe ml-24rpx flex flex-1 justify-between">
          <div class="title text-28rpx font-600 leading-33rpx text-hex-333">新增关注</div>
        </div>
      </div><div class="item mt-32rpx h-96rpx flex items-center">
        <div class="h-76rpx w-76rpx flex items-center">
          <image class="h-40rpx w-40rpx flex-1"
                 :src="`${cdnUrl}/imgs/mine/my_slices/comment.png${imgVersion}`" mode="widthFix" />
        </div>
        <div class="describe ml-24rpx flex flex-1 justify-between" @click="navTo('/pages-mine/comment-mesg')">
          <div class="title text-28rpx font-600 leading-33rpx text-hex-333">评论</div>
        </div>
      </div>
    </div>
    <div class="h-32rpx bg-hex-f5f5f5" />
    <div class="message-top bg-hex-fff p-32rpx">
      <div class="item h-96rpx flex items-center">
        <div class="h-76rpx w-76rpx flex items-center">
          <image class="h-40rpx w-40rpx flex-1"
                 :src="`${cdnUrl}/imgs/mine/my_slices/system.png${imgVersion}`" mode="widthFix" />
        </div>
        <div class="describe ml-24rpx flex flex-1 justify-between">
          <div class="title text-28rpx font-600 leading-33rpx text-hex-333">系统消息</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
//路由跳转
const navTo = (url) => {
  uni.navigateTo({ url })
}

let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
</script>

<style lang='scss'>
.my-message{
  .describe{
    position: relative;

    & ::after {
      content: '';
      position: absolute;
      bottom: -24rpx;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #f5f5f5; /* 分割线颜色 */
    }
  }
}
</style>
